<template>
    <div>
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>id</th>
					<th>课程名称</th>
					<th>上传用户</th>
					<th>学习人数</th>
					<th>章节/课时</th>
					<th>状态</th>
					<th>创建时间</th>
					<th>更新时间</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in listData" :key="index">
					<td>{{item.id}}</td>
					<td>{{item.title}}</td>
					<td>{{item.nickname}}({{item.user_name}})</td>
					<td>{{item.study_num}}</td>
					<td>{{item.chaptersNum}}/{{item.directoryNum}}</td>
					<td :style="item.status==2?'color:#f00':''" :title="item.status==2?item.fail_reason:''">{{item.state}}</td>
					<td>{{item.create_time}}</td>
					<td>{{item.update_time}}</td>
					<td>
						<a-button type="primary" size="small" danger @click="resourceAudit(item)">审核</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="pageSize" :current="page" :total="count"
				@change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer
				@showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
		
		<a-drawer title="课程审核" placement="right" :closable="false" width="550" :visible="visible" @close="onClose">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="审核状态">
					<a-radio-group v-model="auditParams.status" @change="onChange">
						<a-radio value="2">未通过</a-radio>
						<a-radio value="1">通过</a-radio>
					</a-radio-group>
					<!--审核未通过理由-->
					<div style="margin-top: 20px" v-show="textareas">
						<span style="color: #CC3300">未通过理由:</span>
						<textarea v-model="auditParams.fail_reason" cols="60" rows="5"></textarea>
					</div>
				</a-form-item>
				<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="sureSubmit">确定</a-button>
					<a-button class="m-l-10" @click="visible=false">取消</a-button>
				</a-form-item>
			</a-form>
		</a-drawer>
    </div>
</template>

<script>
	import keApi from '../../api/kecheng.js'
	
    export default {
        data() {
        	return {
				keyword:'',
				pageSizeOptions: ['20', '50', '100', '150'],
				page: 1,
				pageSize: 20,
				count: '',
				
				listData:'',
				
				visible: false,
				auditParams:{
					id: '',
					user_id: '',
					status: '',
					fail_reason: ''
				},
            }
        },
		mounted() {
			this.getList()
		},
		methods:{
			getList(){
				keApi.getKechengList(this.page, this.pageSize, this.keyword).then(res => {
					if(res.status == 1){
						this.page = res.result.page
						this.pageSize = res.result.pageSize
						this.count = res.result.count
						this.listData = res.result.data
					}
				})
			},
			
			// 分页
			clickPage(e) {
				this.page = e
				this.getList()
			},
			onShowSizeChange(current, pageSize) {
				this.pageSize = pageSize
				this.page = 1
			},
			
			resourceAudit(item) {
				this.auditParams.id = item.id;
				this.auditParams.user_id = item.user_id;
				this.visible = true
			},
			onClose() {
				this.visible = false;
			},
			
			// 审核是否通过
			onChange(e) {
				this.auditParams.status = e.target.value
				if (e.target.value == 2) {
					this.textareas = true;
				} else {
					this.textareas = false;
				}
			},
			// 审核确定
			sureSubmit() {
				keApi.kechengAudit(this.auditParams).then(res => {
					if (res.status == 1) {
						this.$message.success(res.message);
						this.visible = false;
						this.getList()
					}
				})
			},
		}
    }
</script>

<style>
</style>